<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                    <el-form-item label="时间筛选:">
                        <el-date-picker size="small" @change="dateChange"
                            v-model="dateVal" :picker-options="pickerOptions"
                            type="daterange" :clearable="false"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="用户手机号:" label-width="90px">
                        <el-input v-model="searchPhone" placeholder="请输入用户手机号"
                            class="w140" size="small" clearable type="idcard"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="付款状态:">
                        <el-select v-model="searchType" placeholder="请选择" 
                            size="small" class="w140" clearable
                        >
                            <el-option key="1" label="未支付" value="1">
                            </el-option>
                            <el-option key="2" label="已支付" value="2">
                            </el-option>
                            <el-option key="3" label="已退款" value="3">
                            </el-option>
                            <el-option key="4" label="支付超时" value="4">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="订单状态:">
                        <el-select v-model="searchMakeStatus" placeholder="请选择" 
                            size="small" class="w140" clearable
                        >
                            <el-option key="1" label="待使用" value="1">
                            </el-option>
                            <el-option key="2" label="使用中" value="2">
                            </el-option>
                            <el-option key="3" label="已完成" value="3">
                            </el-option>
                            <el-option key="4" label="已取消" value="4">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="茶室tid:">
                        <el-input v-model="searchTid" placeholder="请输入茶室tid"
                            class="w140" size="small" clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item class="teAliLeft">
                        <el-button type="primary" @click="cliScreen" size="small" class="mr5">
                            立即筛选
                        </el-button>
                        <el-button @click="cliEmpty" size="small">
                            清空
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tag type="success" class="mb5">
            订单总价合计：¥{{ orderAmountTo ? orderAmountTo : '0.00' }}
        </el-tag>
        <el-table :data="tempList" border class="wPer100">
            <el-table-column prop="id" label="订单id" width="65">
            </el-table-column>
            <el-table-column prop="mid" label="用户mid" width="80">
            </el-table-column>
            <el-table-column prop="phone" label="用户手机号" width="115">
            </el-table-column>
            <el-table-column prop="out_trade_no" label="订单号" width="190">
            </el-table-column>
            <el-table-column prop="amount" label="总价" width="60">
            </el-table-column>
            <el-table-column label="付款状态" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.type == 1 ? '未支付' :
                        scope.row.type == 2 ? '已支付' :
                        scope.row.type == 3 ? '已退款' :
                        scope.row.type == 4 ? '支付超时' : scope.row.type
                    }}
                </template>
            </el-table-column>
            <el-table-column label="付款方式" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.pay_type == 1 ? '余额支付' :
                        scope.row.pay_type == 2 ? '微信支付' : scope.row.pay_type
                    }}
                </template>
            </el-table-column>
            <el-table-column label="订单状态" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.make_status == 1 ? '待使用' :
                        scope.row.make_status == 2 ? '使用中' :
                        scope.row.make_status == 3 ? '已完成' :
                        scope.row.make_status == 4 ? '已取消' : scope.row.make_status
                    }}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="clear_end_time" label="保洁时至" width="120">
            </el-table-column> -->
            <el-table-column prop="date" label="下单时间" width="100">
            </el-table-column>
            <el-table-column prop="start_time" label="订单开始时间" width="160">
            </el-table-column>
            <el-table-column prop="end_time" label="订单结束时间" width="160">
            </el-table-column>
            <el-table-column label="会员卡" width="65">
                <template slot-scope="scope">
                    {{ 
                        scope.row.is_cardrule == 1 ? '未使用' :
                        scope.row.is_cardrule == 2 ? '已使用' : scope.row.is_cardrule
                    }}
                </template>
            </el-table-column>
            <el-table-column label="订单类型" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.order_type == 1 ? '预约订单' :
                        scope.row.order_type == 2 ? '立即使用' : scope.row.order_type
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="hour" label="订单时长" width="80">
            </el-table-column>
            <el-table-column label="手动释放" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.is_release == 1 ? '默认' :
                        scope.row.is_release == 2 ? '已释放' : scope.row.is_release
                    }}
                </template>
            </el-table-column>
            <el-table-column label="正常单/续单" width="100">
                <template slot-scope="scope">
                    {{ 
                        scope.row.order_status == 1 ? '正常单' :
                        scope.row.order_status == 2 ? '续单' : scope.row.order_status
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="front_out_trade_no" label="续单上一级订单号" width="190">
            </el-table-column>
            <el-table-column prop="tid" label="茶室tid" width="70">
            </el-table-column>
            <el-table-column prop="tname" label="茶室名" width="120">
            </el-table-column>
            <!-- <el-table-column prop="rid" label="房间rid" width="120">
            </el-table-column> -->
            <el-table-column prop="rname" label="房间名" width="120">
            </el-table-column>
            <el-table-column prop="price" label="单价/时" width="70">
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage" :total="total1"
                :page-sizes="[10]" :page-size="pageSize"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script>
import { homeGetOrderList } from '@s/api'
import timeFormat from "@u/timeFormat";
export default {
    data() {
        return {
			searchTid: '', searchPhone: '', searchType: '', searchMakeStatus: '',
            dateVal: '', searchStart: '', searchEnd: '',
            pickerOptions: {
                disabledDate(time) {
                    // return time.getTime() > new Date().setDate(new Date().getDate() + 1);//不可大于明天
                    return time.getTime() > new Date().setDate(new Date().getDate());//不可大于今天
                }
            },
            currentPage: 1,
            pageSize: 10,
            tempList: [], orderAmountTo: 0,
            total1: 0,

        }
    },
    mounted() {
        this.searchStart = timeFormat.currentTime(new Date());
        this.searchEnd = timeFormat.currentTime(new Date());
        this.dateVal = [
            new Date(), new Date()
        ];
        this.getDataList1();
    },
    methods: {
        getDataList1() {
            homeGetOrderList({
                token: this.$store.getters.token,
                page: this.currentPage - 1,
                number: this.pageSize,
                tid: this.searchTid,
                phone: this.searchPhone,
                type: this.searchType,
                make_status: this.searchMakeStatus,
                start_date: this.searchStart,
                end_date: this.searchEnd
            }).then(res => {
                this.tempList = res.data.data;
                this.orderAmountTo = res.data.amount;
                this.total1 = res.data.count;
            })
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getDataList1();
        },
        dateChange(dateVal) {
            this.searchStart = timeFormat.currentTime(dateVal[0]);
            this.searchEnd = timeFormat.currentTime(dateVal[1]);
        },
        cliScreen() {
            this.currentPage = 1;
            this.getDataList1();
        },
        cliEmpty() {
            this.searchTid = '';
            this.searchPhone = '';
            this.searchType = '';
            this.searchMakeStatus = '';
        }
    }
}
</script>